<!--
 * @Author: wangming
 * @Date: 2020-09-17 10:51:45
 * @LastEditors: wangming
 * @LastEditTime: 2022-05-18 10:01:58
 * @Description: 字表明细
-->
<template>
  <div class="p12 sz tablebox">
    <div class="ks-row-middle lh1 mb24" v-if="!config.__config.noItem">
      <div class="lineY"></div>
      <div class="g3 b f16">{{ config.__config.label }}</div>
    </div>
    <div
      :class="{ active: config.hlcustomBtn.key === getModelForm.key }"
      class="dragbox mt10 mb10"
      @click.stop="handleAdd(config.hlcustomBtn)"
    >
      <customBtn :config="config.hlcustomBtn"></customBtn>
    </div>
    <childTable
      :operate="config.hlChildTable.operate"
      :columnKey="getModelForm.key"
      :modelKey="config.__config.modelCode"
      class="mb10 layoutbox"
      :class="{ active: config.hlChildTable.key === getModelForm.key }"
      @handleAdd="handleAdd"
      :config="config.hlChildTable"
      @header-click="handleAdd"
    >
      <template v-slot:operate>
        <hmButton
          :type="i.buttonType"
          :key="i.handler"
          v-for="i in config.hlChildTable.operate.customBtn"
        >
          {{ i.label }}</hmButton
        >
      </template>
    </childTable>
    <div
      :class="{ active: config.hlChildForm.key === getModelForm.key }"
      @click.stop="handleAdd(config.hlChildForm)"
      class="p10 dragbox"
    >
      <h3>添加{{ config.hlChildForm.__config.label }}</h3>
      <hlLayoutForm
        :parentIndex="parentIndex"
        :configList="configList"
        :config="config.hlChildForm"
        isTableAdd
      ></hlLayoutForm>
    </div>
  </div>
</template>
<script>
import hmButton from "../hlTableList/__components/button.jsx";
import customBtn from "../hlcustomBtn";
import mixins from "../mixins.js";
import hlLayoutForm from "../hlLayoutForm.vue";
import childTable from "../hlTableList/__components/childTable.vue";
export default {
  props: {
    parentIndex: {
      type: Number,
      default: 0,
    },
    configList: {
      type: Array,
      default: () => [],
    },
  },
  components: { customBtn, childTable, hlLayoutForm, hmButton },
  mixins: [mixins],
  created() {
    this.config.hlcustomBtn.key = "btns_" + this.config.key;
    this.config.hlChildForm.key = "form_" + this.config.key;
    this.config.hlChildTable.key = "table_" + this.config.key;
    this.config.hlChildTable.operate.key = "operate_" + this.config.key;
    this.config.hlChildsysBtn.key = "sysbtn_" + this.config.key;
    if (!this.config.hlcustomBtn.children.length) {
      this.config.hlcustomBtn.children = [this.config.hlChildsysBtn];
    }
    if (!this.config.hlChildTable.operate.customBtn.length) {
      this.config.hlChildTable.operate.customBtn = [
        { label: "查看", handler: "search", _sys_: true },
        { label: "编辑", handler: "edit", _sys_: true },
        { label: "删除", buttonType: "danger", handler: "delete", _sys_: true },
      ];
    }
  },
  watch: {
    "config.__config.modelCode": function () {
      let { modelCode, moduleId } = this.config.__config;
      this.config.hlChildForm.__config.modelCode = modelCode;
      this.config.hlChildForm.__config.moduleId = moduleId;
    },
  },
  data() {
    return {
      list: [],
      column: [],
    };
  },
  methods: {
    async handleAdd(value = {}) {
      value.isFormLayout = true;
      this.setModelForm(value);
    },
  },
};
</script>

<style lang="scss" scoped>
.primary {
  border: 1px solid #dcdfe6;
  padding: 9px 15px;
  border-radius: 3px;
  background-color: #409eff;
  color: #fff;
  &:hover {
    border: 1px solid #409eff;
  }
}
.tablebox {
  width: 100%;
}
.lineY {
  width: 2px;
  height: 18px;
  background: #1890ff;
  margin-right: 4px;
}
.dragbox {
  min-height: 50px;
  border: 1px solid #f1f1f1;
}
</style>
